<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title>新大楼会议室预订系统登陆</title>
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta name="keywords" content="登陆，会议室，预定，预定系统，同花顺">
      <meta name="description" content="同花顺新大楼会议室预订系统">
      <!-- 引入 Bootstrap -->
      <link href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
      <link rel="stylesheet" href="/static/css/responsive-nav.css">
      <!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
      <!-- 注意： 如果通过 file://  引入 Respond.js 文件，则该文件无法起效果 -->
      <!--[if lt IE 9]>
         <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
         <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
      <![endif]-->

      <style type="text/css">
      html,body{font-family: "微软雅黑";    padding: 0px !important; margin: 0px !important;direction: ltr;font-size:14px;height:100%;}
      .navbox{background:#212121;margin:0;}
      .navbar{min-height:40px;border:none;}
      .navbar-brand {height: 40px;padding: 12px 15px;color:#fff;font-weight:bolder;}
      .navbar-brand:hover,.navbar-brand:focus{color:#fff;}
      .navbar-header .admin_logo{height:40px;width:40px;float: left;margin-left:10px;padding:2%;}
      .navbar-header .admin_logo .admin_logo_logo{height:100%;width:100%;background:url("/static/images/adminlogo.png") no-repeat;background-size:100% 100%;}
      .navbar-text{text-align:right;margin:0;line-height:40px;padding-right:6px;color:#F09C22;;}
      .navbar-text span{font-weight:bold;margin-right:6px;}
      .navbar-text a{font-weight: bold;transition:all 0.2s ease;color:#999;}
      .navbar-text a:hover{transition:all 0.2s ease;color: #F09C22;;}
      /*nav结束*/
      .content_box {padding-top: 40px;height:100%;}
      .content_box .navbar_left{height:100%;margin:0;}
      .leftnav{width:225px;padding:0;background: #3d3d3d;}
      .leftnav ul{width:100%;padding-top: 20px;}
      .navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:hover, .navbar-default .navbar-nav>.active>a:focus {color: #F09C22;background-color: #3D3D3D;}
      .active{position:relative;}
      .navbar-default .navbar-nav>li>a {color: #444;}
      .navbar-nav{margin:0;}
      .navbar-toggle{margin:0;margin-top:4px;}
      .navbar-toggle span{background:#5A5A5A;}
      .navbar-default .navbar-nav>li>a {
              color: #FFF;
          }
      .navbar-default .navbar-nav>li>a:hover, .navbar-default .navbar-nav>li>a:focus{color:#fff;}
      .navbar-default .navbar-nav>li{border-bottom: 1px solid #4C4C4C;}

      .navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:hover, .navbar-default .navbar-nav>.open>a:focus {
        color: #999;
        background-color: #3D3D3D;}
      .open>.dropdown-menu{background:#3d3d3d;}
      .dropdown-menu>li>a{color:#bdbdbd;}
      /*正文*/
      .bt_cotent{width:100%;}
      .bt_cotent .cont_content{margin-left:225px;}
      .bt_cotent .cont_content .yd_btn{margin-top:20px;}
      .bt_cotent .cont_content .yd_select{margin-top:20px;}
      .table-responsive {margin-top:15px;}
      .s_title{background:#53B2D0;padding:10px;border-radius:6px;color:#fff;}
      .s_title span{display:inline-block;}
      .s_title .information{float:left;}
      .s_title .state{float: right;} 
      .myage .row{margin-top:5px;border-bottom:1px solid #e5e5e5;}
      .clear{clear:both;}
      #select4{width:100%;}
      /* 小型设备（平板电脑，768px 起） */
      @media (max-width: 768px) {
          .bt_cotent{padding-top:20px;}
          .navbar-text{background: #3D3D3D;}
          .navbar-brand{font-size:14px;}
          .user_message{background:#DEDEDE;}
          .leftnav{width:100%;}
          .content_box {padding-top: 59px}
          .leftnav ul li{background: #212121;}
          .navbar-default .navbar-nav .open .dropdown-menu>li>a {
          color: #bdbdbd;}
          .navbar-default .navbar-nav .open .dropdown-menu>li>a:hover,.navbar-default .navbar-nav .open .dropdown-menu>li>a:focus{color:#bdbdbd;}
          .bt_cotent .cont_content{width:100%;margin:0;}


       }


      @media (min-width: 768px){

          .leftnav{position: absolute;z-index:2;}
          .bt_cotent{position: absolute;top:0;}
          .navbar-nav>li {float:none;}
          .navbar-collapse.collapse{height:100%!important;}
          .active i{position:absolute;right:0;display:block;height:25px;width:8px;top: 14px;background:url("/static/images/sidebar-menu-arrow.png")no-repeat;}
          .container {width: 525px;}

      }


      @media (min-width: 992px) {
        .container {
            width: 745px; 
        }

      }



      @media (min-width: 1200px){
      .container {
          width: 945px; 
        }
      }

       @media (min-width: 1400px){
      .container {
          width: 1180px; 
        }
      }

      </style>
   </head>
   <body>
     <div class="navbar navbar-fixed-top navbox">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" 
             data-target="#example-navbar-collapse">
             <span class="sr-only">切换导航</span>
             <span class="icon-bar"></span>
             <span class="icon-bar"></span>
             <span class="icon-bar"></span>
          </button>
          <div class="admin_logo">
            <div class="admin_logo_logo"></div>
          </div>
          <a class="navbar-brand" href="#">同花顺会议室预定系统</a>
        </div>
        <div class="user_message">
          <p class="navbar-text navbar-right">
            你好,<span>{{ request.session.username }}-权限{{request.sesion.permissions}}</span>
            <a href="{% url 'logout' %}" class="navbar-link">退出</a>
            <a href="#" class="navbar-link">设置</a>
          </p>
        </div>
     </div>



     <div class="page-container row-fluid content_box">
        <div class="navbar navbar-default navbar_left" role="navigation">
           <div class="navbar-header">
           </div>
           <div class="collapse navbar-collapse leftnav" id="example-navbar-collapse">
              <ul class="nav navbar-nav">
                 <li>
                    <a href="/meetingApproval/">会议审批</a>
                    <i></i>
                </li>
                 <li class="active">
                    <a href="/roomManage/">会议室管理</a>
                    <i></i>
                 </li>
                 <li>
                    <a href="#">员工管理</a>
                    <i></i>
                 </li>
              </ul>
           </div>
            <div class="bt_cotent">
              <div class="cont_content">
                <div class="container">
                  <h3>
                    会议室管理
                    <small>会议室的管理</small>
                  </h3>

                  <div class="row">
                      <div class="col-xs-6 col-sm-6">
                        <div class="form-group">
                            <label for="name">楼层选择:</label>
                            <select class="form-control" id="startTime">
                               {%for floor in floors%}
                                    <option>{{floor.floorNum}}</option>
                                {%endfor%}
                            </select>
                        </div>
                      </div>
                      <div class="col-xs-6 col-sm-6 yd_btn">
                        <button type="button" class="btn btn-success btn-lg btn-block" data-toggle="modal" data-target="#mymessage">新的会议室 + </button>
                      </div>
                  </div>

                <div class="row">
                  <div class="col-xs-12 col-sm-12">
                      <div class="table-responsive">
                         <table class="table table-bordered">
                            <caption style="color:red;">说明：对现有的会议室进行管理，包括会议室名称，使用权限等级等。</caption>
                            <thead>
                               <tr>
                                  <th>会议室名称</th>
                                  <th>楼层</th>
                                  <th>申请人权限</th>
                                  <th>容纳人数</th>
                                  <th>硬件设备</th>
                                  <th>状态</th>
                                  <th>操作</th>
                               </tr>
                            </thead>
                            <tbody id="rooms">
                                {%for room in rooms%}
                                        <tr>
                                          <td>{{room.name}}</td>
                                          <td>{{room.floor}}</td>
                                          <td>{{room.permissions}}</td>
                                          <td>{{room.maxFill}}</td>
                                          <td>1</td>
                                          <td>
                                              {% if room.state %}
                                                开放预订
                                              {%else%}
                                              <span style="color:red;">禁止预订</span>
                                              {%endif%}
                                          </td>
                                          <td>
                                            <button value={{room.id}}   class="btn btn-warning editRoomModal" data-toggle="modal" data-target="#ediet">修改</button>
                                            <button value={{room.id}}  class="btn btn-danger deleteRoomModal" data-toggle="modal" data-target="#delete">删除</button>
                                          </td>
                                       </tr>
                                {%endfor%}
                            </tbody>
                         </table>
                      </div>    
                  </div>
                </div>
            </div>
        </div>
     </div>

     <!--详情页弹出层-->
     <!-- 模态框（Modal） -->
	<div class="modal fade" id="mymessage" tabindex="-1" role="dialog" 
	   aria-labelledby="myModalLabel" aria-hidden="true">
	   <div class="modal-dialog">
	      <div class="modal-content">
              <div class="modal-header">
	            <button type="button" class="close"
	               data-dismiss="modal" aria-hidden="true">
	                  &times;
	            </button>
	            <h4 class="modal-title" id="myModalLabel">
	               添加新的会议室
	            </h4>
	         </div>
              <form action="/addRoom/" method="post">
                  {% csrf_token %}
	         <div class="modal-body">
                     <div class="row">
                       <div class="col-xs-6 col-sm-6">
                           <div class="form-group">
                              <label>所属楼层：</label>
                               <select class="form-control" name="floor" id="startTime">
                                  {%for floor in floors%}
                                        <option value="{{floor.floorNum}}">{{floor.floorNum}}</option>
                                    {%endfor%}
                              </select>
                          </div>
                        </div>
                        <div class="col-xs-6 col-sm-6">
                           <div class="form-group">
                              <label>会议室名称:</label>
                              <input type="text" name="name" class="form-control" style="cursor: auto;">
                          </div>
                        </div>
                   </div>
                      <div class="row">
                            <div class="col-xs-6 col-sm-6">
                               <div class="form-group">
                                  <label>所在位置:</label>
                                  <input type="text" class="form-control" style="cursor: auto;">
                              </div>
                            </div>

                            <div class="col-xs-6 col-sm-6">
                               <div class="form-group">
                                  <label>容纳人数:</label>
                                  <input type="number" name="maxFill"  class="form-control" style="cursor: auto;">
                              </div>
                            </div>

                            <div class="col-xs-12 col-sm-12">
                               <div class="form-group">
                                  <label>内置属性:</label>
                                  <label class="checkbox-inline">
                                      <input type="checkbox" name="hasTv" value="false">内置电视机
                                  </label>
                                  <label class="checkbox-inline">
                                      <input type="checkbox" name="hasTel" value="false">支持电话会议
                                  </label>
                                  <label class="checkbox-inline">
                                      <input type="checkbox" name="hasMv" value="false">支持视频会议
                                   </label>
                                </div>
                            </div>

                            <div class="col-xs-12 col-sm-12">
                              <div class="form-group">
                                  <label>预订权限:</label>
                                  <label class="checkbox-inline">
                                      <input type="radio" name="permissions" id="inlineCheckbox1" value="1">权限1
                                  </label>
                                  <label class="checkbox-inline">
                                      <input type="radio" name="permissions" id="inlineCheckbox2" value="2">权限2
                                  </label>
                                  <label class="checkbox-inline">
                                      <input type="radio" name="permissions" id="inlineCheckbox3" value="3">权限3
                                   </label>
                                </div>
                            </div>


                            <div class="col-xs-12 col-sm-12">
                               <div class="form-group">
                                  <label>预订权限:</label>
                                  <label class="checkbox-inline">

                                      <input type="radio" name="state"  id="inlineCheckbox1" value="true">启用
                                  </label>
                                  <label class="checkbox-inline">
                                      <input type="radio" name="state"   id="inlineCheckbox2" value="false">禁用
                                  </label>
                                </div>
                      </div>


	         </div>
	         <div class="modal-footer">
	            <button type="button" class="btn btn-default" 
	               data-dismiss="modal">取消
	            </button>
              <button type="submit"  class="btn btn-primary" >
                 添加
              </button>
	         </div>
               </form>
          </div><!-- /.modal-content -->

		</div><!-- /.modal -->
	</div>
  </div>
	<!--修改弹出层-->
	<div class="modal fade" id="ediet" tabindex="-1" role="dialog" 
	   aria-labelledby="myModalLabel" aria-hidden="true">
	   <div class="modal-dialog">
	      <div class="modal-content">
	         <div class="modal-header">
	            <button type="button" class="close" 
	               data-dismiss="modal" aria-hidden="true">
	                  &times;
	            </button>
	            <h4 class="modal-title" id="myModalLabel">
	               不通过
	            </h4>
	         </div>
              <form action="/editRoom/" method="post">
                  {% csrf_token %}
	         <div class="modal-body">
                <div class="row">
                   <div class="col-xs-6 col-sm-6">
                       <div class="form-group">
                          <label>所属楼层：</label>
                           <select class="form-control" name="floor" id="startTime">
                              {%for floor in floors%}
                                    <option value="{{floor.floorNum}}">{{floor.floorNum}}</option>
                                {%endfor%}
                          </select>
                      </div>
                    </div>
                    <div class="col-xs-6 col-sm-6">
                       <div class="form-group">
                          <label>会议室名称:</label>
                           <input type="number" name="roomId" style="display:none;" value="" >
                          <input type="text" name="name" class="form-control" style="cursor: auto;">
                      </div>
                    </div>
               </div>
                  <div class="row">
                        <div class="col-xs-6 col-sm-6">
                           <div class="form-group">
                              <label>所在位置:</label>
                              <input type="text" class="form-control" style="cursor: auto;">
                          </div>
                        </div>

                        <div class="col-xs-6 col-sm-6">
                           <div class="form-group">
                              <label>容纳人数:</label>
                              <input type="text" name="maxFill" class="form-control" style="cursor: auto;">
                          </div>
                        </div>

                        <div class="col-xs-12 col-sm-12">
                           <div class="form-group">
                              <label>内置属性:</label>
                              <label class="checkbox-inline">
                                  <input type="checkbox" name="hasTv" id="inlineCheckbox1" value="false">内置电视机
                              </label>
                              <label class="checkbox-inline">
                                  <input type="checkbox" name="hasTel" id="inlineCheckbox2" value="false">支持电话会议
                              </label>
                              <label class="checkbox-inline">
                                  <input type="checkbox" name="hasMv" id="inlineCheckbox3" value="false">支持视频会议
                               </label>
                            </div>
                        </div>

                        <div class="col-xs-12 col-sm-12">
                          <div class="form-group">
                              <label>预订权限:</label>
                              <label class="checkbox-inline">
                                  <input type="radio" name="permissions" value="1">权限1
                              </label>
                              <label class="checkbox-inline">
                                  <input type="radio" name="permissions" value="2">权限2
                              </label>
                              <label class="checkbox-inline">
                                  <input type="radio" name="permissions" value="3">权限3
                               </label>
                            </div>
                        </div>
                        <div class="col-xs-12 col-sm-12">
                           <div class="form-group">
                              <label>预订权限:</label>
                              <label class="checkbox-inline">
                                  <input type="radio" name="state" value="true">启用
                              </label>
                              <label class="checkbox-inline">
                                  <input type="radio" name="state" value="false">禁用
                              </label>
                            </div>
                  </div>
           </div>
	         <div class="modal-footer">
	            <button type="button" class="btn btn-default" 
	               data-dismiss="modal">取消
	            </button>
	            <button type="submit" class="btn btn-primary"
              >
	               确定
	            </button>
	         </div>
	      </div><!-- /divdal-content -->
              </form>
		</div><!-- /.modal -->
	</div>
  </div>
     <!--删除弹出层-->
     <div class="modal fade" id="delete" tabindex="-1" role="dialog" 
	   aria-labelledby="myModalLabel" aria-hidden="true">
	   <div class="modal-dialog">
	      <div class="modal-content">
	         <div class="modal-header">
	            <button type="button" class="close" 
	               data-dismiss="modal" aria-hidden="true">
	                  &times;
	            </button>
	            <h4 class="modal-title" id="myModalLabel">
	               删除信息
	            </h4>
	         </div>
	         <div class="modal-body">
	            确定要删除此条信息吗？
                 <input id="delRoomId" value="" style="display:none" />
	         </div>
	         <div class="modal-footer">
	            <button type="button" class="btn btn-default" 
	               data-dismiss="modal">取消
	            </button>
	            <button type="button" class="btn btn-primary" id="btn-delete-room" data-dismiss="modal">
	               确定
	            </button>
	         </div>
	      </div><!-- /.modal-content -->
		</div><!-- /.modal -->
	</div>
      <!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) -->
      <script src="http://apps.bdimg.com/libs/jquery/2.0.0/jquery.min.js"></script>
      <!-- 包括所有已编译的插件 -->
      <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
      <!--nav导航-->
      <script src="/static/js/responsive-nav.js"></script>

   </body>

    <script type="text/javascript">
    $.ajaxSetup({
          data: {csrfmiddlewaretoken: '{{ csrf_token }}' },
        });
        $(function(){
            $("#rooms").on("click",".deleteRoomModal",function(){
                var roomId=$(this).val();
                $("#delRoomId").val(roomId);
            });
            $("#rooms").on("click",".editRoomModal",function(){
                var roomId=$(this).val();
                $.ajax({
                    url:"/getRoom?roomId="+roomId,
                    type:"get",
                    success:function(data){
                        console.info(data["name"]);
                        $("#ediet").find("input[name='roomId']").val(data["id"]);
                        $("#ediet").find("input[name='name']").val(data["name"]);
                        $("#ediet").find("input[name='maxFill']").val(data["maxFill"]);
                        $("#ediet").find("input[value='"+data["permissions"]+"']").attr("checked",true);
                        if(data["state"]){
                            $("#ediet").find("input[value='true']").attr("checked",true);
                        }else{
                            $("#ediet").find("input[value='false']").attr("checked",true);
                        }
                        if(data["hasTv"]==true){
                            $("#ediet").find("input[name='hasTv']").attr("checked",true);
                            $("#ediet").find("input[name='hasTv']").val(true);
                        }
                        if(data["hasMv"]==true){
                            $("#ediet").find("input[name='hasMv']").attr("checked",true);
                            $("#ediet").find("input[name='hasMv']").val(true);
                        }
                        if(data["hasTel"]==true){
                            $("#ediet").find("input[name='hasTel']").attr("checked",true);
                            $("#ediet").find("input[name='hasTel']").val(true);
                        }

                    },
                    error:function(data){

                    }
                })
            });
            $("#btn-delete-room").on("click",function(){
                var roomId=$("#delRoomId").val();
                $.ajax({
                    url:"/deleteRoom/",
                    type:"post",
                    data:{roomId:roomId},
                    success:function(data){
                        window.location.reload();
                    },
                    error:function(data){

                    }
                })
            });
            $(":checkbox").on("click",function(){
                if($(this).is(':checked')){
                    $(this).val(true);
                }else{
                    $(this).val(false);
                }
            });
        })

      </script>
</html>
